<template>
    <div>
        <div class="content">
            <div class="portrait"><img src="../../../layout/components/imgs/admin.jpg" alt="" style="width:100px;height:100px;object-fit:cover"></div>
            <div class="btnImg"><a>更换头像</a></div>
            <form class="vessel">
                <div class="carry" v-for="(list,index) in lists" :key="index">
                    <div class="left"><p>{{list.name}}</p></div>
                    <div class="right"><input type="text" class="item" :class="{inputbor:current==index}" @mouseenter="enter(index)" @mouseleave="leave" :disabled="list.forbidden" v-model="ruleForm[index]"  v-on:keyup.enter="submit" @blur="affirm"></div>
                </div>
            </form>
            <el-button type="primary" class="btn" @click="close">关闭</el-button>
        </div>
    </div>
</template>

<script>
import {submitBtn} from '@/api/user'

export default {
    name:'personage',
    data(){
        return{
            ruleForm:['','','','','','','','','','','','',''],
            userID:'',  //用户id
            getInfoData:[],
            statu:'',
            lists:[
                {name:'员工姓名：',forbidden:true},
                {name:'员工工号：',forbidden:true},
                {name:'部门：',forbidden:true},
                {name:'角色：',forbidden:true},
                {name:'性别：',forbidden:true},
                {name:'工作电话：',forbidden:false},
                {name:'手机号码：',forbidden:false},
                {name:'邮箱：',forbidden:false},
                {name:'企业微信：',forbidden:true},
                {name:'员工状态：',forbidden:true},
            ],
            current:-1,
            showborder:false,   //input 的边框
        }
    },
    methods:{
        enter(index){
            this.showborder=true
            this.current=index
        },
        leave(){
            this.showborder=false
            this.current=null
        },
        affirm(){
            submitBtn({
                userID:this.userID,
                iconUrl:'',
                workPhone:this.ruleForm[5],
                mobelPhone:this.ruleForm[6],
                email:this.ruleForm[7]
            }).then((res)=>{
                localStorage.setItem('getInfo',JSON.stringify(res.Result))
            })
        },
        close(){
            this.$router.push({path:'/'})
        },
        submit(){
            submitBtn({
                userID:this.userID,
                iconUrl:'',
                workPhone:this.ruleForm[5],
                mobelPhone:this.ruleForm[6],
                email:this.ruleForm[7]
            }).then((res)=>{
                localStorage.setItem('getInfo',JSON.stringify(res.Result))
                alert(res.Message)
            })
        }
    },
    created(){
        this.ruleForm[0]=JSON.parse(localStorage.getItem('getInfo')).UserName
        this.ruleForm[1]=JSON.parse(localStorage.getItem('getInfo')).JobNum
        this.ruleForm[2]=JSON.parse(localStorage.getItem('getInfo')).DepartmentName
        this.ruleForm[3]=JSON.parse(localStorage.getItem('getInfo')).RealName
        this.ruleForm[4]=JSON.parse(localStorage.getItem('getInfo')).SexFormat
        this.ruleForm[5]=JSON.parse(localStorage.getItem('getInfo')).WorkPhone
        this.ruleForm[6]=JSON.parse(localStorage.getItem('getInfo')).MobilePhone
        this.ruleForm[7]=JSON.parse(localStorage.getItem('getInfo')).Email
        this.ruleForm[8]=JSON.parse(localStorage.getItem('getInfo')).WeChatID
        if(JSON.parse(localStorage.getItem('getInfo')).Statu==0){
                this.statu="男"
        }else{
            this.statu='女'
        }
        this.ruleForm[9]=this.statu
        this.userID=JSON.parse(localStorage.getItem('getInfo')).UserID
    }
}
</script>

<style lang="scss" scoped>
.content{
    width:300px;
    height: 100%;
    margin: 30px auto 0;
    .btnImg{
        font-size: 14px;
        margin: 15px 0 0 75px;
    }
    .btn{
        width:152px;
        height:40px;
        margin-left: 60px; 
    }
    .portrait{
        width:100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 0 0 50px;
    }
    .vessel{
        width:300px;
        height: 440px;
        margin-top: 30px; 
        .carry{
            width:300px;
            height: 19px;
            margin-bottom:23px; 
            display: flex;
            justify-content: space-between;
            .left{
                flex: 1;
                text-align: right;
                font-size: 14px;
                color: #666666 ;
            }
            .right{
                flex: 2;
                .item{
                    border: none ;
                    background: #ffffff;
                }
                .inputbor{
                    border:1px solid #dcdfe6;
                }
            }
        }
    }
}
</style>
